<template>
	<view class="status_bar" :style="{paddingTop:(safeAreaInsets*2)+'rpx'}">
		<view class="status">
			<slot name="left"></slot>
		</view>	
		<view class="status">
			<!-- 我们希望把页头放这里 -->
			<slot name="center"></slot>
		</view>	
		<view class="status">
			<!-- 我们希望把页头放这里 -->
			<slot name="right"></slot>
		</view>	
	</view>
</template>

<script>
	export default {
		name:"Navbar",
		data() {
			return {
				safeAreaInsets: 0,
			};
		},
		created() {
			//获取 屏幕边界到安全区域距离
			const top = uni.getSystemInfoSync().safeAreaInsets.top;
			this.safeAreaInsets = top;
		},
	}
</script>

<style lang="scss">
.status_bar{
	z-index: 9999;
	width: 100%;
	background:   #eee;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: flex-end;
	.status{
		width: 100rpx;
		margin: 0 10rpx 15rpx 10rpx;
	}
	.status:nth-child(2){
		width: 300rpx;
		margin: 0 10rpx 15rpx 10rpx;
	}
}
</style>